<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/layui.all.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-form"   style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" required autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input type="text" name="mobile" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-inline">
            <input type="text" value="" id="pic_1_src" name="head" style="display: none;">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="pic_1" width="100" height="100" >
                    <p id="picText_1"></p>
                </div>
                <button type="button" class="layui-btn" id="upload_1">上传图片</button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否禁用</label>
        <div class="layui-input-inline">
            <input type="checkbox" lay-filter="switchTest" name="switch" lay-skin="switch" lay-text="启用|禁用" checked  id="status" value="N">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit  value="确认">
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    layui.use(['form', 'layer','upload'], function () {
        var form = layui.form,
            $=layui.$,
            upload = layui.upload,
            layer = layui.layer;
        form.on('switch(switchTest)', function(){
            if(this.checked){
                document.getElementById("status").value='N';
            }
            else {
                document.getElementById("status").value='Y';
            }

        });
        const uploadInst = upload.render({
            elem: '#upload_1'
            , url: '/sys/uploadPictures'
            , size: 2048
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#pic_1').attr('src', result);
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败' + res);
                }
                //上传成功
                var demoText = $('#picText_1');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                //将后台获取的图片地址传到前台存入隐藏控件中，随着表单一起提交
                document.getElementById("pic_1_src").value = res.data.src;
                console.log("图片地址：" + res.data.src);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })
</script>
</body>
</html>
